<template>
    <div>
        <el-select v-model="productVo.brand" placeholder="请选择品牌">
            <el-option
                    v-for="brand  in brandList"
                    :key="brand"
                    :label="brand"
                    :value="brand">
            </el-option>
        </el-select>
        <el-select v-model="productVo.productName" placeholder="请选择商品名">
            <el-option
                    v-for="productName in productNameList"
                    :key="productName"
                    :label="productName"
                    :value="productName">
            </el-option>
        </el-select>
                <el-select v-model="productVo.applicationStatus" placeholder="审核状态">
                    <el-option
                            v-for="item in examineStatus"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label">
                    </el-option>
                </el-select>
        <el-button @click="fetchProducts">查询</el-button>
        <!-- 商品数据表格 -->
        <el-table :data="productList" style="width: 100%">
            <el-table-column prop="variantId" label="商品ID"></el-table-column>
            <el-table-column prop="brand" label="品牌名称"></el-table-column>
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="typeName" label="包装类型名称"></el-table-column>
            <el-table-column prop="inventoryQuantity" label="库存数量" >
                <template #default="{ row }">
                    {{ row.inventoryQuantity }}
                </template>
            </el-table-column>
            <el-table-column  prop="handleNumber" label="清理数量">
                <template #default="{ row }">
                    {{row.handleNumber}}
                </template>
            </el-table-column>
            <el-table-column prop="handleReason" label="清理原因" >
                <template #default="{ row }">
                    {{row.handleReason}}
                </template>
            </el-table-column>
            <el-table-column prop="applicationName" label="申请人"></el-table-column>
            <el-table-column prop="applicationStatus" label="审核状态"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <!-- 审核操作-->
                    <el-select v-model="scope.row.applicationStatus" placeholder="审核" v-if="scope.row.applicationStatus === '待审核'" @change="updateStatus(scope.row)">
                        <el-option
                                v-for="item in examineStatus"
                                :key="item.id"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                    <span v-else>
                        审核完成
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
        >
        </el-pagination>
    </div>
</template>

<script setup>
    import {ref, reactive, computed, onMounted} from 'vue';
    import {selectProductName,selectBrandName,selectDefectiveApplication,updateDefectiveStatus} from '@/api/warehouse/invInventory'
    // 定义数据
    let productList = ref([]); //商品集合
    const examineStatus = ref([
            {id:"0",label:'待审核'},
            {id:"1",label:'审核通过'},
            {id:"2",label: '审核不通过'},
        ]
    )
    const productVo = ref({
        productName:'',
        brand: '',
        applicationStatus:'',
    });
    const brandList = ref([]);
    const productNameList = ref([]);
    const page = ref({
        total: 22,
        currentPage: 1,
        pageSize: 10,
    })
    // 定义分页控件的事件处理函数
    function handleSizeChange(newSize) {
        page.value.pageSize = newSize;
        fetchInventory();
    }
    function handleCurrentChange(newPage) {
        page.value.currentPage = newPage;
        fetchInventory();
    }
    function selectInventory() {
        page.value.currentPage = 1;
        fetchInventory();
    }
    function fetchProducts() {
        const params = {
            ...productVo.value, // 展开 inventoryVo.value 对象的所有属性
            currentPage: page.value.currentPage, // 当前页码
            pageSize: page.value.pageSize // 每页条数
        };
        selectDefectiveApplication(params).then(response => {
            page.value.total = response.total;
            productList.value = response.rows.map(p => ({
                defectiveApplicationId:p.defectiveApplicationId,
                variantId: p.variantId,
                brand: p.brand,
                productName: p.productName,
                typeName: p.typeName,
                inventoryQuantity:p.inventoryQuantity,
                handleNumber:p.handleNumber,
                handleReason: p.handleReason,
                applicationName:p.applicationName,
                applicationStatus:p.applicationStatus,
            }));
            console.log(productList.value)
        }).catch(error => {
            console.error('获取商品列表失败:', error);
            // 错误处理逻辑
        });

    }
    function updateStatus(row) {
        updateDefectiveStatus(row).then(response => {
            console.log(response)
        }).catch(error => {
            console.error('修改状态失败:', error);
            // 错误处理逻辑
        });
    }
    function fetchProductsName(){
        selectProductName().then(response => {
            productNameList.value = response.productNameList;
        }).catch(error => {
            console.error('获取商品名失败:', error);
            // 错误处理逻辑
        });
    }
    function fetchBrand(){
        selectBrandName().then(response => {
            brandList.value = response.brandList; // 直接赋值字符串数组
        }).catch(error => {
            console.error('获取品牌失败:', error);
            // 错误处理逻辑
        });
    }

    // 定义加载数据的方法
    function loadOptions() {
        fetchProducts();
        fetchProductsName();
        fetchBrand();
    }

    onMounted(() => {
        // 初始化逻辑
        loadOptions();
        //fetchInventory();
    });
</script>

<style scoped>

</style>